<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>漫鸽笔记Markdown编辑器v0.1</title>
    <link rel="stylesheet" href="../static/plugin/layui/css/layui.css?v=1" media="all">
    <link rel="stylesheet" href="../static/css/md.css?v=2" media="all">
    <script src="../static/plugin/layui/layui.js?v=1"></script>
    <script src="../static/js/jquery-3.3.1.min.js?v=1"></script> 
    <script src="../static/plugin/editor.md-master/lib/marked.min.js?v=1"></script>
    <script src="../static/plugin/editor.md-master/lib/prettify.min.js?v=1"></script>
    <script src="../static/plugin/editor.md-master/lib/raphael.min.js?v=1"></script>
    <script src="../static/plugin/editor.md-master/lib/underscore.min.js?v=1"></script>
    <script src="../static/plugin/editor.md-master/lib/sequence-diagram.min.js?v=1"></script>
    <script src="../static/plugin/editor.md-master/lib/flowchart.min.js?v=1"></script>
    <script src="../static/plugin/editor.md-master/lib/jquery.flowchart.min.js?v=1"></script>
    <script src="../static/plugin/editor.md-master/editormd.js?v=1"></script>
    <script src="../static/js/man.js?v=2"></script> 
    <style type="text/css">
    pre{ 
        white-space:pre-wrap; 
        white-space:-moz-pre-wrap; 
        white-space:-pre-wrap; 
        white-space:-o-pre-wrap; 
        word-wrap:break-word; 
    } 
    p {
        word-break:break-word;
    }

  .scrollbar {
  width : 30px;
  height: 300px;
  margin: 0 auto;
  }
  .scrollbar-div::-webkit-scrollbar {
      /*滚动条整体样式*/
      width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
  }
  .scrollbar-div::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : #535353;
  }
  .scrollbar-div::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background   : #ededed;
  }

  .scrollbar-div2::-webkit-scrollbar {
      /*滚动条整体样式*/
      width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
  }
  .scrollbar-div2::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background   : #ededed;
  }
  .scrollbar-div2::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : #c2c2c2;
  }
  
  .fontsize21{font-size: 21px;}

    </style>
</head>

<body class="scrollbar-div" style="padding:2%;">
    <div id="result"></div>
<script type="text/javascript">
  //markDown转HTMl的方法
    function mdToHml(str){
        //先对容器初始化，在需要展示的容器中创建textarea隐藏标签，
        $("#result").html('<textarea id="appendTest" style="display:none;"></textarea>');
        var content=str;//获取需要转换的内容
        $("#appendTest").val(content);//将需要转换的内容加到转换后展示容器的textarea隐藏标签中
        //转换开始,第一个参数是上面的div的id
        editormd.markdownToHTML("result", {
            htmlDecode: "style,script,iframe", //可以过滤标签解码
            emoji: true,
            taskList:true,
            tex: true,               // 默认不解析
            flowChart:true,         // 默认不解析
            sequenceDiagram:true,  // 默认不解析
        });
    }

    var text = '# 欢迎使用 Markdown在线编辑器 MdEditor\n\
**Markdown是一种轻量级的「标记语言」**\n\
![markdown](https://www.mdeditor.com/images/logos/markdown.png "markdown")\n\
asdsadadadsasdadaasdaadsadadadadadadsdasdsdasasd\n\
\n\
| h1    |    h2   |      h3 |\n\
|:------|:-------:|--------:|\n\
| 100   | [a][1]  | ![b][2] |\n\
| *foo* | **bar** | ~~baz~~ |\n\
asdasdasda\n\
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面，Markdown文件的后缀名便是“.md”\n\
\n\
\n\
## MdEditor是一个在线编辑Markdown文档的编辑器\n\
\n\
*MdEditor扩展了Markdown的功能（如表格、脚注、内嵌HTML等等），以使让Markdown转换成更多的格式，和更丰富的展示效果，这些功能原初的Markdown尚不具备。*\n\
\
> Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具，如~~Pandoc~~，Pandao；要么基于网站，如GitHub和Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。\n\
\n\
**Markdown是一种轻量级的「标记语言」**\n\
![markdown](https://www.mdeditor.com/images/logos/markdown.png "markdown")\n\
asdsadadadsasdadaasdaadsadadadadadadsdasdsdasasd\n\
| h1    |    h2   |      h3 |\n\
|:------|:-------:|--------:|\n\
| 100   | [a][1]  | ![b][2] |\n\
| *foo* | **bar** | ~~baz~~ |\n\
asdasdasda\n\
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面，Markdown文件的后缀名便是“.md”\n\
\n\
\n\
## MdEditor是一个在线编辑Markdown文档的编辑器\n\
\n\
*MdEditor扩展了Markdown的功能（如表格、脚注、内嵌HTML等等），以使让Markdown转换成更多的格式，和更丰富的展示效果，这些功能原初的Markdown尚不具备。*\n\
\
> Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具，如~~Pandoc~~，Pandao；要么基于网站，如GitHub和Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。\n\
\n\
**Markdown是一种轻量级的「标记语言」**\n\
![markdown](https://www.mdeditor.com/images/logos/markdown.png "markdown")\n\
asdsadadadsasdadaasdaadsadadadadadadsdasdsdasasd\n\
\n\
| h1    |    h2   |      h3 |\n\
|:------|:-------:|--------:|\n\
| 100   | [a][1]  | ![b][2] |\n\
| *foo* | **bar** | ~~baz~~ |\n\
asdasdasda\n\
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面，Markdown文件的后缀名便是“.md”\n\
\n\
\n\
## MdEditor是一个在线编辑Markdown文档的编辑器\n\
\n\
*MdEditor扩展了Markdown的功能（如表格、脚注、内嵌HTML等等），以使让Markdown转换成更多的格式，和更丰富的展示效果，这些功能原初的Markdown尚不具备。*\n\
\
> Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具，如~~Pandoc~~，Pandao；要么基于网站，如GitHub和Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。\n\
\n\
'
window.onload = function(){ 
  mdToHml(text);
}


</script>

</body>
</html>